
<template lang="jade">
div.return-bar
  i.iconfont(@click="back()") &#xe668;
  邀请有礼

div.homepage
  toast(:show.sync="show_dialog") 复制成功

div.invite-page.detail_top

  div.cbtm
    img(src="../../assets/images/invite/invitation_01.png")
  //div.cbtm
    img(src="../../assets/images/invite/invitation_02.png")
  div.cbtm
    img(src="../../assets/images/invite/invitation_03.png")
    
  div.cbtm.rewardlist
    div.show_ward
      ul(:style="topc")
        li(v-for=" (inde, item) in list " )
          flexbox
            flexbox-item {{item.phone}} {{item.desc}}

  div.cbtm.myreward
    div.my_reward_bd
      flexbox
        flexbox-item 现金红包：
        flexbox-item 利息奖励：
      flexbox
        flexbox-item.bold 
          b {{my_reward.hongbao}}
          元
        flexbox-item.bold 
          b {{my_reward.interest}}
          元

  div.cbtm.estimate
    div.com_bd
      flexbox
        flexbox-item 投资金额：
        flexbox-item 利息奖励：
      flexbox
        flexbox-item
          input(type="text",  v-model="account")
        flexbox-item
          select(v-model="period")
            option(value="1") 1个月
            option(value="3") 3个月
            option(value="6") 6个月
            option(value="9") 9个月
            option(value="10") 10个月
            option(value="12") 12个月
            option(value="18") 18个月
            option(value="24") 24个月
            option(value="36") 36个月

      flexbox
        flexbox-item 收益率(%)：
        flexbox-item 还款方式：
      flexbox
        flexbox-item
          input(type="text",  v-model="apr")
        flexbox-item
          select(v-model="style")
            option(value="month") 按月等额本息
            option(value="endmonth") 按月付息
            option(value="endmonths") 按月付息到期还本
            option(value="end") 到期还本还息

      div.mb10 我获得的推荐收益是：
        b {{rewards}}
        元

      button(@click="estimate()") 计算

  div.cbtm.link
    div.com_bd
      input(id="sharelink", type="text", v-model="r_url")
      button(@click=" copyLink ") 复制链接
      div.note 您可以复制这个链接到QQ、微博、微信中，发送给同学、同事或好友。

  div.cbtm.qrcode
    div.com_bd
      div.img
        img(src="http://qr.topscan.com/api.php?text={{r_url_en}}")

      div.note 让好友用过微信“扫一扫”，即可立即注册成为有喜财富投资人。


  div.cbtm.code
    div.com_bd
      div.phone {{phone}}
      div.note 被推荐人注册时, 填写您的邀请码,就能成功邀请。

  div.cbtm
    img(src="../../assets/images/invite/invitation_10.png")
    
</template>


<style>
@import '~vux/dist/vux.css';
</style>

<script>
import '../../assets/sass/user/index.scss'
import {c_invited, c_invite_estimate} from '../../config/api'
import {Toast,Flexbox,FlexboxItem} from 'vux'
export default{
  data(){
    return{
      show_dialog:false,
      list:[],
      my_reward:{},
      apr:'12',
      account:'10000',
      period:'1',
      style:'month',
      code:'',
      phone:'',
      r_url:'',
      r_url_en:'',
      rewards:'',
      activeIndex:0
    }
  },

  computed:{
    topc(){
      //console.log('topc');
      return 'top:' + ( - this.activeIndex * 1 ) + 'rem';
    }
  },


  components: {
    Toast,
    Flexbox,
    FlexboxItem
  },

  methods: {
    copyLink(event){
      event.preventDefault();
      // 选取input元素的内容
      var input = document.getElementById("sharelink");
      input.select();
      // 将选区内容复制到剪贴板
      document.execCommand("copy");
      this.show_dialog = true;
    },



    back(){
      //window.history.back();
      this.$route.router.go('/user')
    },

    estimate(){
      this.$http({url: c_invite_estimate+'&apr='+this.apr+'&account='+this.account+'&period='+this.period+'&style='+this.style, method: 'GET'}).then(function (response) {
        this.rewards = response.data.rewards;
      });
    },

    fetch: function () {
      var that = this;
      this.$http({url: c_invited, method: 'GET'}).then(function (response) {
        this.list = response.data.data.list;
        this.my_reward = response.data.data.my_reward;
        this.code  = response.data.data.code;
        this.phone  = response.data.data.phone;

        this.r_url = 'http://m.uximoney.com/?#!/reg?recommend_uid='+response.data.data.code;
        this.r_url_en = 'http%3a%2f%2fm.uximoney.com%2f%3f%23!%2freg%3frecommend_uid%3d'+response.data.data.code;
      });

      setInterval(function() {
        if(that.activeIndex < that.list.length-1) {
          that.activeIndex += 1;
        } else {
          that.activeIndex = 0;
        }
      }, 3000);




    }
  },
  route:{
    activate( transition ){
      this.fetch();
      transition.next();
    }
  }
}

</script>
